<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="box1">
        <div class="content">
            <ul class="clear">
                <div id="one" width='100'>水电费</div>
                <div id="two" width='200'>消息称</div>
                <div id="three" width='300px'>从VB你</div>
                <li>
                    <span>嘻嘻哈哈</span>
                </li>
                <li class="uu1">2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li class="lol">6</li>
            </ul>
            <div id="bottom">
                <div id="left">
                    <div id="right">
                        <input type="text" name="myname" value="" placeholder="">
                        <input type="password" name="ee" value="" placeholder="">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function(){
            // id 选择器
            $('#box1').css({'width':'1200px','height':'1000px','background':'pink'})

            // tagname
            $('li').css('font-size','40px')
            $('ul>li').css('font-weight','900')
            $('#one+div').css('background','yellow')
            $('.uu1~li').css('color','red')

            // :first
            $('li:first').css('color','blue')
            $('li:eq(2)').css('color','orange')
            $('input[type="text"]').css('background','black')
        })
    </script>
</body>
</html>